<template>
	<view class="content"> 
		<block v-if="list.length!=0">
			<uv-radio-group v-model="radiovalue" @change="defaultChange" >
				<view class="address_item" v-for="(item,index) in list" :key="item.id" @click.stop="selectAddr(item)">
					<view class="fx-row-sb-c address_info" >
						<view class="address_le">
							<view><span class="ft32 mr16">{{item.name}}</span><span class="grey2">{{item.phone}}</span></view>
							<view class=" text-beyond-multi mt16 grey2" style="width: 560rpx;line-height: 40rpx;">{{item.region}}{{item.address}}</view>
						</view>
						<view  @click.stop="setedit(item)">
							<uv-icon name="edit-pen" size="28" color="#B2B2B2"></uv-icon>
						</view>
					</view>
					<view class="fx-row-sb-c" style="padding: 30rpx 0;">
						<label class="radio grey3" @click.stop="setDefault(item.id)"><radio  style="transform:scale(0.7)" color='#AD8539'  :checked="!item.isDefault"></radio>默认地址</label> 
						<span  style="color: #666666;" @click.stop="delAddress(item.id)">删除</span>
					</view>  
				</view>
			</uv-radio-group> 
			<uv-load-more :status="isLoading" fontSize='12' color='#696969' nomoreText=' '/>
			<uv-modal ref="modal" showCancelButton  content='确定删除该地址？' @confirm="sureDel"></uv-modal> 
			<view style="width: 100%;height: 100rpx;"></view>
		</block>
		<!-- 缺省状态 -->
		<view v-else class="emptys">
		 <image src="/static/picture/empty.png" mode="widthFix" lazy-load></image>
		 <view>您还没有地址</view>
		</view>
		<view class="select">
			<view class="select_btn" @click="addAddrs">添加地址</view>
		</view> 
	</view>
</template>

<script>
	import { addressList,addressDefault,addressDelete } from '@/utils/api.js' 
	export default { 
		data() {
			return {
				time:'',
				list:[],
				radiovalue:'',
				isLoading:'nomore',  //是否加载中
				pageNum:1,//请求的页码
				pageSize:10,//请求的条数 
				serviceId:'', //项目id
				id:'', //地址id 
				isState:'1',
				beforePage1:{},
				addressId:''
			}
		},
		onLoad(option) {     
			this.isState = option.state; //订单支付选择页面state=select
			// this.addressId = option.id;
			console.log(this.isState);
			this.getAddress()
			let pages1 = getCurrentPages(); // 当前页面
			this.beforePage1 = pages1[pages1.length - 2]; // 上一页 
		},
		//监听页面返回
		onUnload() { 
			if(this.isState == 'select'){
				// #ifdef H5
				this.beforePage1.changeAddr(this.addressId);
				// #endif
				// #ifndef H5  
				this.beforePage1.$vm.changeAddr(this.addressId);
				// #endif
			}  
		}, 
		methods: { 
			// 地址列表
			getAddress(){
				this.isLoading = 'loading'
				uni.showLoading({
					title: '加载中'
				});
				const  datas = {
					"current": this.pageNum,  //页码
					"size": this.pageSize,   //条数 
				} 
				addressList(datas).then((res) => {
					console.log(res);  
					uni.hideLoading()
					if(res.code == '200'){ 
						const data = res.result.records 
						this.list = [...this.list,...data]
						if(data.length < this.pageSize){
							this.isLoading = 'nomore'
						}
					}
				})   
			},
			// 修改默认
			defaultChange(e){
				console.log(e);
			},
			// 设为默认
			setDefault(id){ 
				uni.showLoading({
					title: '加载中'
				});
				addressDefault({'id':id}).then((res) => {  
					uni.hideLoading()
					if(res.code == '200'){ 
						uni.showToast({
							title:'设置成功！',
							icon:'none'
						})
						this.list = []
						this.pageNum = 1
						this.getAddress()
					}
				}) 
			},
			// 删除地址
			delAddress(id){
				this.id = id
				this.$refs.modal.open();
			},
			//确定删除
			sureDel(){
				this.showloading = true 
				addressDelete({'id':this.id}).then((res) => {
					if(res.code == '200'){
						this.showloading = false
						uni.showToast({
							title:'删除成功！',
							icon:'none'
						})
						this.list= []
						this.pageNum = 1
						this.getAddress()
					}
				}) 
			},
			// 修改地址
			setedit(item){ 
				uni.navigateTo({
					url:'/pages/user/addAddr?state=edit&info=' + encodeURIComponent(JSON.stringify(item)) 
				})
			},
			// 添加地址
			addAddrs(){
				if(this.isState =='select'){   //添加地址来源订单支付，关闭当前地址列表页面
					return uni.redirectTo({
						url:'/pages/user/addAddr?state=add&goback=2'
					})
				}
				uni.navigateTo({
					url:'/pages/user/addAddr?state=add'
				})
			},
			//修改、新增地址回调
			async reFresh(addId){ 
				this.list = []
				this.pageNum = 1
				await this.getAddress()
				console.log(this.isState);
				// if(this.isState =='select'){
				// 	console.log('地址列表');    
				// 	 // #ifdef H5
				// 	 this.beforePage1.changeAddr(addId);
				// 	 // #endif
				// 	 // #ifndef H5
				// 	 this.beforePage1.$vm.changeAddr(addId);
				// 	 // #endif
				// 	uni.navigateBack() 
				// } 
			}, 
			//订单支付选择地址
			selectAddr(item){
				console.log(this.isState);
				if(this.isState == 'select'){  
					this.addressId = item.id
					// #ifdef H5
					this.beforePage1.changeAddr(item.id);
					// #endif
					// #ifndef H5
					this.beforePage1.$vm.changeAddr(item.id);
					// #endif
					uni.navigateBack() 
					return
				} 
			},
		},
		// 上拉刷新
　　onReachBottom() {   
			if(this.isLoading=='nomore'){
				return;
			}
			this.pageNum++
			//调用请求接口
			this.getAddress()
		},
	}
</script>

<style  lang="scss">
	page{
		background-color:$uni-main-page;
	}
	.address_item{
		width: 670rpx;
		padding: 0 40rpx;
		margin-top: 14rpx;
		font-size: 28rpx;
		background-color: #fff;
		.address_info{
			padding: 26rpx 0;
			border-bottom: 1rpx solid $uni-color-line;
		}
	}
	.select{
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 82rpx;
		padding: 22rpx 0;  
		z-index: inherit;
		.select_btn{
			width: 690rpx;
			height: 84rpx;
			margin: 0 auto;
			border-radius: 40rpx; 
			// background: linear-gradient(360deg, $uni-main 0%, $uni-main-o 100%);
			background:$uni-main;
			font-size: 32rpx;
			text-align: center; 
			color: #fff;
			line-height: 84rpx;
		}
	}
</style>
